<template>
	<z-nav-bar :title="title">
		<template v-slot:right>
			<view v-if="openData.id" class="uni-red" @click="delOpenCourse">删除</view>
		</template>
	</z-nav-bar>
	<view class="announcement flex_fsc">
		<image :src="setting.oss_pub_domain + '/app-img/icon/icon_horn.png'" class="icon-size-32"></image>
		<view class="uni-585C66 uni-ml-16">
			体系课上架审核通过后将对外部用户展示，请不要带有学员肖像等侵权视频，审核发现后将立即下架。
		</view>
	</view>
	<view class="edit-input-item flex_sbc">
		<view class="width-100 uni-mr-16" style="text-align: justify; text-align-last: justify">
			<text class="uni-red">*</text>
			课包名称
		</view>
		<view class="input-box flex_fsc">
			<input
				v-model="openData.name"
				type="text"
				placeholder="请输入体系课名称"
				placeholder-class="uni-placeholder"
				class="width-100"
			/>
		</view>
	</view>
	<view class="edit-input-item flex_sbc">
		<view class="width-100 uni-mr-16" style="text-align: justify; text-align-last: justify">
			<text class="uni-red">*</text>
			总课时
		</view>
		<view class="input-box flex_fsc">
			<input
				v-model="openData.duration"
				type="number"
				placeholder="请输入体系课名称"
				placeholder-class="uni-placeholder"
			/>
		</view>
	</view>
	<view class="edit-input-item flex_sbc">
		<view class="width-100 uni-mr-16" style="text-align: justify; text-align-last: justify">
			<text class="uni-red">*</text>
			课程标签
		</view>
		<view class="input-box flex_fsc" @click="selTag">
			<input
				v-model="openData.descriptionTagName"
				type="text"
				placeholder="请输选择课程标签"
				placeholder-class="uni-placeholder"
				class="width-100"
				disabled
				style="pointer-events:none"
			/>
		</view>
	</view>
	<view class="edit-input-item flex_sbc">
		<view class="width-100 uni-mr-16" style="text-align: justify; text-align-last: justify">
			<text class="uni-red">*</text>
			兑换积分
		</view>
		<view class="input-box flex_fsc">
			<input
				v-model="openData.exchange"
				type="number"
				placeholder="请输入体系课名称"
				placeholder-class="uni-placeholder"
			/>
		</view>
	</view>
	<view class="z-font-22" style="color: #c4c7cc; margin-left: 175rpx">
		学员兑换该课程的积分，教练可用于积分商城兑换礼品
	</view>
	<view class="line-spacing uni-mt-20" style="height: 20rpx"></view>
	<view class="flex_cc" style="height: 136rpx">
		<view
			class="course-statue flex_fsc"
			:class="[openData.isUp ? 'active' : 'unactivated']"
			@click="openData.isUp = 1"
		>
			<uni-icons
				:type="openData.isUp ? 'circle-filled' : 'circle'"
				size="20"
				:color="openData.isUp ? '#008965' : '#C0C4CC'"
			></uni-icons>
			<view class="uni-ml-16">课程上架</view>
		</view>
		<view
			class="course-statue flex_fsc uni-ml-40"
			:class="[openData.isUp ? 'unactivated' : 'active']"
			@click="openData.isUp = 0"
		>
			<uni-icons
				:type="openData.isUp ? 'circle' : 'circle-filled'"
				size="20"
				:color="openData.isUp ? '#C0C4CC' : '#008965'"
			></uni-icons>
			<view class="uni-ml-16">课程下架</view>
		</view>
	</view>
	<view class="line-spacing" style="height: 20rpx"></view>
	<view class="cover">
		<view class="flex_sbc">
			<view class="z-font-32">
				<text class="uni-red">*</text>
				课程封面设置
			</view>
			<view class="button" @click="uploadImg.open()">上传/更改</view>
		</view>
		<image v-if="openData.material" :src="setting.oss_pub_domain + openData.material" class="upload"></image>
		<view v-else class="upload" @click="uploadImg.open()">+</view>
	</view>
	<view class="line-spacing" style="height: 20rpx"></view>
	<view class="uni-ma-32">
		<view class="z-font-32 text-w">课包描述</view>
		<textarea v-model="openData.description" class="describe" placeholder="请输入内容(多行)" placeholder-class="uni-placeholder"></textarea>
	</view>
	<view class="line-spacing" style="height: 20rpx"></view>
	<view class="cover">
		<view class="flex_sbc">
			<view class="z-font-32">
				<text class="uni-red">*</text>
				添加方案
			</view>
			<view class="button" @click="selectScheme">添加</view>
		</view>
		<view v-for="(item, index) in openData.schemeList" :key="item.id" class="problem">
			<view class="flex_sbc">
				<view>{{ item.name }}</view>
				<image
					:src="setting.oss_pub_domain + '/app-img/icon/icon_close.png'"
					class="icon-size-32"
					@click="openData.schemeList.splice(index, 1)"
				></image>
			</view>
		</view>
	</view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
	<selete-media ref="uploadImg" type="img" @done="selImg"></selete-media>
</template>

<script setup>
import { getPrivateUrl } from '@/api/common.js';
import { addOpenCoursePackage, editOpenCoursePackage, delOpenCoursePackage, getCourseDetails } from '@/api/course.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

const eventChannel = that.getOpenerEventChannel();

//  提交数据
const openData = reactive({
	schemeList: []
});
Object.assign(openData, uni.getStorageSync('open-course') || {});
const title = openData.id ? '编辑体系课' : '新建体系课';
openData.id && getCourseDetails(openData.id).then(res => {
	Object.assign(openData, res);
})

//  选择方案
function selectScheme() {
	uni.setStorageSync('select-scheme', openData.schemeList);
	uni.navigateTo({
		url: '/pages/scheme/course-select/course-select',
		events: {
			relScheme: data => {
				openData.schemeList = data;
			}
		}
	});
}

// 课程标签
function selTag() {
	uni.navigateTo({
		url: `/pages/question/add-item/add-item?type=0`,
		events: {
			getTag: data => {
				openData.descriptionTag = data.code
				openData.descriptionTagName = data.obj[0].map(item => item.dictValue).join('-->')
				console.log(openData);
			}
		}
	})
}

// 底部按钮
const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];
function submit() {
	if (!openData.name) return that.tools.alert('请输入课程包名称');
	if (!openData.duration) return that.tools.alert('请输入课总课时');
	if (!openData.descriptionTag) return that.tools.alert('请输入课程标签');
	if (!openData.material) return that.tools.alert('请上传封面');
	if (!openData.schemeList.length) return that.tools.alert('请选择方案');
	const imgReg = /^(https?:\/\/)?((|[\w-]+\.)+[a-z0-9]+)(\/.*)(\?.*)/i;
	const regList = imgReg.exec(openData.material);
	const material = regList ? regList[4] : openData.material;
	console.log(openData.descriptionTag);
	const postData = {
		name: openData.name,
		duration: openData.duration,
		descriptionTag: openData.descriptionTag,
		exchange: openData.exchange,
		tuition: openData.exchange,
		isUp: openData.isUp,
		material,
		description: openData.description,
		relScheme: openData.schemeList.map((item) => item.id).join(',')
	};
	const funName = openData.id ? editOpenCoursePackage : addOpenCoursePackage
	funName(postData, openData.id).then((res) => {
		eventChannel.emit('editDone', openData);
		uni.navigateBack();
	});
}

//  封面上传
const uploadImg = ref('');
function selImg(e) {
	openData.material = e;
	that.tools.alert('上传成功');
}

function countScheme(qs) {
	let count = 0;
	// qs.
	if (!qs.length) return count;
	qs.forEach((item) => {
		if (item.questionSchemeList && item.questionSchemeList.length) count += item.questionSchemeList.length;
	});
	return count;
}

function delOpenCourse() {
	uni.showModal({
		title: '删除提示',
		content: '确定要删除该体系课吗？',
		success: res => {
			if (res.confirm) {
				delOpenCoursePackage(openData.id).then(res => {
					uni.navigateBack()
					that.tools.alert('删除成功')
					eventChannel.emit('editDone', '');
				})
			}
		}
	})
}
</script>

<style lang="scss">
@import '../open-course.scss';
</style>
